<!--这是菜单页面-->
<template>
  <div style="width: 200px">
    <my-star-button @click="Init.showModal()">新增物品</my-star-button>
    <my-star-button @click="Type.showModal()">类型管理</my-star-button>
  </div>
  <my-modal url="v1/mod/insert" v-model="Init.open" :columns="Init.columns" v-model:form="Init.insertFormState"
            @insert="Init.getDataSource()"></my-modal>
  <a-modal width="1000px" v-model:open="Type.open" :footer="null">
    <div style="min-height: 400px">
      <a-input style="width: 200px" placeholder="输入类型名称" v-model:value="Type.formState"></a-input>
      <a-button style="margin-left: 20px;" @click="Type.add()">新增</a-button>
      <div v-for="(item,index) in Type.dataSource">
        <label>类型：</label>
        {{ item.type_name }}
        <a style="margin-left: 10px;" @click="Type.update(item.id)">修改</a>
        <a-popconfirm
            title="真的要删除吗？"
            ok-text="是"
            cancel-text="否"
            @confirm="Type.remove(item.id)"
        >
          <a style="margin-left: 10px;color: red" href="#">删除</a>
        </a-popconfirm>
      </div>
    </div>
  </a-modal>
  <a-modal width="1000px" v-model:open="Detail.open" :title="`${Detail.title}的详细信息`"
           cancel-text="取消" ok-text="确定" :footer="null" @ok="()=>{Detail.open = false}">
    <a @click="Detail.add()">添加行</a>
    <div style="display: flex" v-for="(item,index) in Detail.dataSource">
      <a-form-item label="字段名">
        <a-input v-model:value="item.item_f_name"></a-input>
      </a-form-item>
      <a-form-item style="margin-left: 10px;" label="字段值">
        <a-input v-model:value="item.item_f_value"></a-input>
      </a-form-item>
      <a-form-item style="margin-left: 10px;"><a @click="Detail.update(item)">保存</a></a-form-item>
      <a-popconfirm
          title="真的要删除吗？"
          ok-text="是"
          cancel-text="否"
          @confirm="Detail.remove(item)"
      >
        <a-form-item style="margin-left: 10px;"><a style="color: red" href="#">删除</a></a-form-item>
      </a-popconfirm>
    </div>
  </a-modal>
  <div style="width: 1000px;margin-left: 30vh;margin-top: -10vh;">
    <my-s-table local-storage-key="modMana" :columns="Init.columns"
                :can-row-select="true"
                :row-deletable="false"
                :editable="true"
                @row-selected="Init.rowSelected"
                :value-setter="Init.valueSetter"
                @rowsDeleted="Init.deleteModItem"
                :image-columns="Init.imageColumns"
                :custom-edit-columns="Init.customEditColumns"
                :data-source="Init.dataSource">
      <template #nickname="{cell}">
        <a @click="Detail.openModal(cell)">{{ cell.record.nickname }}</a>
      </template>
      <template #img="{cell}">
        <a-image width="80px" :src="cell.record.img"></a-image>
      </template>
      <template #_cellEditor="{cell}">
        <div v-if="cell.column.dataIndex === 'type'">
          <my-select :options="Type.dataSource" v-model:value="cell.modelValue.value"
                     @blur="Init.handleSave(cell)"></my-select>
        </div>
        <div v-else-if="cell.column.dataIndex === 'say'">
          <a-textarea
              style="border: transparent; background-color: transparent; outline: none; box-shadow: none;width: 400px"
              auto-size v-model:value="cell.modelValue.value" @blur="Init.handleSave(cell)"></a-textarea>
        </div>
      </template>
    </my-s-table>
  </div>
</template>
<script setup lang="ts">
import {reactive} from "vue";
import MyStarButton from "@/components/button/MyStarButton.vue";
import MyModal from "@/components/MyModal.vue";
import MySTable from "@/components/MySTable.vue";
import {post} from "@/common";
import {message} from "ant-design-vue";
import MySelect from "@/components/MySelect.vue";

const Type = (() => {
  const showModal = async () => {
    s.open = true
  }
  const getDataSource = async () => {
    const res = await post("v1/mod/type/get", {})
    s.dataSource = res.map(item => ({
      ...item,
      label: item.type_name,
      value: item.type_name
    }))
    Init.columns.find(it => it.dataIndex === 'type').options = s.dataSource
  }

  const remove = async (id) => {
    post("v1/mod/type/delete", {id: id}).then(res => {
      message.success("删除成功！")
      getDataSource()
    })
  }
  const add = async () => {
    post("v1/mod/type/insert", {type_name: s.formState}).then(() => {
      message.success("新增成功！")
      getDataSource()
    })
  }
  const update = async (id) => {
    await post("v1/mod/type/update", {id: id, type_name: s.formState})
    await getDataSource()
  }
  const s = reactive({
    open: false,
    dataSource: <any>[],
    formState: "",
    showModal,
    remove,
    add,
    update
  })
  getDataSource()
  return s
})()
const Detail = (() => {
  const update = async (item) => {
    post("v1/modDetail/update", item).then(() => {
      message.success("修改成功！")
      getDataSource(item.item_id)
    })
  }
  const remove = async (item) => {
    post("v1/modDetail/delete", {id: item.id}).then(() => {
      message.success("删除成功！")
      getDataSource(item.item_id)
    })
  }
  const add = async () => {
    post("v1/modDetail/insert", {item_id: s.itemId}).then(() => {
      message.success("新增成功！")
      getDataSource(s.itemId)
    })
  }
  const getDataSource = async (id:number) => {
    s.dataSource = await post("v1/modDetail/get", {item_id: id})
  }
  const openModal = async (cell:any) => {
    s.open = true
    s.title = cell.record.nickname
    s.itemId = cell.record.id
    await getDataSource(cell.record.id)
  }
  const s = reactive({
    dataSource: <any>[],
    title: "",
    open: false,
    itemId: -1,
    openModal,
    update,
    remove,
    add
  })
  return s
})()

const Init = (() => {
  const showModal = async () => {
    s.open = true;
  };
  const getDataSource = async () => {
    s.dataSource = await post("v1/mod/get", {})
  }
  const deleteModItem = async (selectedRowsKey: any, selectedRows: any) => {
    const ids = selectedRows.map((item) => item.id);
    post("v1/mod/delete", ids).then(() => {
      message.success("删除成功！")
      getDataSource()
    })
  }
  const valueSetter = async (cell: any) => {
    const {record, newValue, column} = cell;
    if (record[column.dataIndex] !== newValue) {
      record[column.dataIndex] = newValue;
      //更新单元格
      await post("v1/mod/update", {id: record.id, [column.dataIndex]: newValue});
    }
    return true;
  }
  //更新类型

  const rowSelected = (selectedIds: string[], selectedRows: any[]) => {
    console.log("选择了", selectedIds)
    s.selectedRows = selectedRows;
  }
  const handleSave = cell => {
    cell.save()
    cell.closeEditor()
  }
  const s = reactive({
    dataSource: <any>[],
    customEditColumns: ["type", "say"],
    imageColumns: ["img"],
    selectedRows: <any>[],
    insertFormState: <any>{},
    columns: <any>[
      {
        dataIndex: "nickname",
        title: "名称",
      },
      {
        dataIndex: "type",
        title: "类型",
        type: "select",
        options: [],
        filter: {
          type: "classification"
        }
      },
      {
        dataIndex: "img",
        title: "图片",
        autoHeight: true
      },
      {
        dataIndex: "say",
        title: "介绍",
        autoHeight: true
      }
    ],
    open: false,
    showModal,
    valueSetter,
    getDataSource,
    deleteModItem,
    rowSelected,
    handleSave,
  });
  getDataSource()
  return s;
})();
</script>
<style scoped lang="scss">
.c__menu {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 14px;
  margin-top: 30px;
  overflow: hidden;
}

.tree {
  width: 230px;
  overflow-x: hidden;
  overflow-y: auto;
}

.content {
  padding: 30px;
  --angle: 0deg;
  border-bottom: 1px solid;
  border-image: conic-gradient(from var(--angle), red, yellow, lime, aqua, blue, magenta, red) 1;
  animation: 3s rotate9234 linear infinite;
  overflow-x: hidden;
  overflow-y: auto;
}

@keyframes rotate9234 {
  to {
    --angle: 360deg;
  }
}

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
</style>
